import React from 'react'
import { connect } from 'react-redux'
import { userLogin, userLogout} from 'reducers/author'
import { Redirect } from 'react-router-dom'
import Popup from 'components/Popup'
import styles from './style.less'
import 'iconfont/iconfont.css'

@connect(
	state=>state.auth,
	{userLogin, userLogout}
)
export default class Login extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			visible: false,
			username: '',
			userpassword: ''
		}
		this.handleChangeName = this.handleChangeName.bind(this)
		this.handleChangePassword = this.handleChangePassword.bind(this)
		this.showPopup = this.showPopup.bind(this)
	}

	handleChangeName(event){
		const value = event.target.value
		this.setState({
			visible: false,
			username: value
		})
	}
	handleChangePassword(event){
		const value = event.target.value
		this.setState({
			visible: false,
			userpassword: value
		})
	}

	showPopup(){
		if (this.state.username ==='beed' && this.state.userpassword === '123456') {
			this.props.userLogin()
		}else{
			this.setState({
				visible: true
			})
		}
	}

	render() {
		return (
			<div className={styles.login}>
				{this.props.isAuth ? <Redirect to='/'/> : null}
				<img src={require('../../static/images/loginLogo.svg')} className={styles.logo}/>
				<div className={styles.userinfo}>
					<div className={styles.username}>
						<i className="iconfont icon-people_fill"></i>
						<input type="text" placeholder='默认为 beed' value={this.state.username} onChange={this.handleChangeName}/>
					</div>
					<div className={styles.userpassword}>
						<i className="iconfont icon-lock_fill"></i>
						<input type="password" placeholder='默认为 123456' value={this.state.userpassword} onChange={this.handleChangePassword}/>
					</div>
				</div>
				<button className={styles.button} onClick={this.showPopup}>登 录</button>
				{/*弹窗组件*/}
				<Popup visible={this.state.visible} title='温馨提示' content='现在测试只支持填写默认参数登录' close='我知道了'/>
			</div>
		)
	}
}